<template>
  <div
    class="stage-list"
    :style="{height: `${height}px`, width: `${width}px`}">
    <div
      class="stage-header"
      :class="{'is-first': index === 0}"
      :style="{width: `${width}px`}">
      <span v-if="!stage.isEnd">{{ index < 9 ? `0${index + 1}` : (index + 1) }}&nbsp;&nbsp;</span>
      <span>{{ stage.settingName }}</span>
      <span>（{{ stage.count }}个）</span>
    </div>
    <div class="stage-money is-money text-one-line">￥{{ formatMoney(stage.sum) }}</div>
    <div
      v-infinite-scroll="getData"
      class="stage-body"
      :style="{height: `${height - 80}px`}"
      :infinite-scroll-distance="100"
      :infinite-scroll-delay="400"
      :infinite-scroll-disabled="disabled">
      <div
        v-for="(row, rowIndex) in list"
        :key="`row-${index}-${rowIndex}`"
        class="business-item">
        <div class="title text-one-line" @click="enterDetail('business', row)">
          <i class="wk wk-icon-account-book" />
          <span class="can-visit--underline">{{ row.businessName }}</span>
        </div>
        <div class="main-info">
          <flexbox :gutter="0" class="main-info-item" @click.native="enterDetail('customer', row)">
            <div class="label">客户名称：</div>
            <flexbox-item class="value text-one-line can-visit--underline">{{ row.customerName }}</flexbox-item>
          </flexbox>
          <flexbox :gutter="0" class="main-info-item">
            <div class="label">预计成交日：</div>
            <flexbox-item class="value text-one-line">{{ row.dealDate }}</flexbox-item>
          </flexbox>
          <flexbox :gutter="0" class="main-info-item">
            <div class="label">商机金额：</div>
            <flexbox-item class="text-one-line is-money">{{ formatMoney(row.money) }}</flexbox-item>
          </flexbox>
          <flexbox :gutter="0" class="main-info-item">
            <div class="label">负责人：</div>
            <flexbox-item class="value text-one-line"><wx-open-data :openid="row.ownerUserName" /></flexbox-item>
          </flexbox>
        </div>
      </div>
      <p v-if="loading" class="more-desc">加载中...</p>
      <p v-if="!loading && noMore" class="more-desc">没有更多了</p>
    </div>
  </div>
</template>

<script>
import { crmBusinessIndexAPI } from '@/api/crm/business'

import { isEmpty } from '@/utils/types'
import { separator } from '@/filters/vueNumeralFilter/filters'

export default {
  // StageList
  name: 'StageList',

  components: {

  },

  props: {
    index: Number,
    width: {
      type: Number,
      default: 230
    },
    height: Number,
    baseParams: {
      type: Object,
      required: true
    },
    stage: {
      type: Object,
      required: true
    },
    flowItem: {
      type: Object,
      required: true
    }
  },

  data() {
    return {
      loading: false,
      currentPage: 1,
      noMore: false,
      list: []
    }
  },

  computed: {
    disabled() {
      return this.loading || this.noMore
    }
  },

  watch: {
    baseParams() {
      this.refreshList()
    }
  },

  created() {
  },

  mounted() {},

  beforeDestroy() {},

  methods: {
    /**
     * @description: 刷新
     * @return {*}
     */
    refreshList() {
      this.currentPage = 1
      this.getData()
    },

    /**
     * @description: 获取数据
     * @return {*}
     */
    getData() {
      if (this.loading) return
      this.loading = true
      const validSearchList = this.baseParams?.searchList?.filter(item => {
        return item.formType !== 'business_cause'
      }) || []
      const params = {
        page: this.currentPage,
        limit: 5,
        search: this.baseParams.search,
        type: this.baseParams.type,
        sceneId: this.baseParams.sceneId,
        searchList: validSearchList.concat([{
          formType: 'business_cause',
          name: 'flowName',
          type: 1,
          values: [this.flowItem.flowId]
        }, {
          formType: 'business_cause',
          name: this.stage.endId ? 'isEnd' : 'settingName',
          type: 1,
          values: [this.stage.endId || this.stage.settingName]
        }])
      }
      crmBusinessIndexAPI(params)
        .then(res => {
          const resData = res.data || {}
          if (this.currentPage === 1) {
            this.list = resData.list || []
          } else {
            this.list = this.list.concat(resData.list || [])
          }
          this.stage.count = resData.totalRow
          this.stage.sum = resData.extraData.money?.businessSumMoney
          this.currentPage++
          this.noMore = this.currentPage >= resData.totalPage
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },

    /**
     * @description: 查看详情
     * @return {*}
     */
    enterDetail(type, data) {
      console.log('enterDetail3', type, data[`${type}Id`])
      this.$emit('enter-detail', type, data[`${type}Id`])
    },

    /**
     * @description: 格式金额
     * @param {*} value
     * @return {*}
     */
    formatMoney(value) {
      return isEmpty(value) ? '' : (isNaN(value) ? value : separator(value))
    }
  }
}
</script>

<style lang="scss" scoped>
.stage-list {
  display: inline-block;
  overflow-x: hidden;
  overflow-y: auto;

  .business-item {
    width: 100%;
    height: 125px;
    padding: 12px 8px;
    margin-bottom: 8px;
    overflow: hidden;
    cursor: pointer;
    border-bottom: 1px solid $--border-color-base;
    border-radius: $--border-radius-base;

    &:hover {
      border-bottom: none;
      box-shadow: $--box-shadow-bottom;
    }

    .title {
      .wk {
        color: $--color-n50;
      }
    }

    .main-info {
      margin-top: 4px;

      .main-info-item + .main-info-item {
        margin-top: 4px;
      }

      .main-info-item {
        align-items: flex-start;
        justify-content: flex-start;
        overflow: hidden;

        .label {
          color: $--color-n200;
        }

        .value {
          color: $--color-black;
        }
      }
    }
  }

  .stage-money {
    padding: 12px 8px;
    border-right: 1px solid $--border-color-base;
  }

  .is-money {
    color: $--color-y400;
  }

  .stage-header {
    position: relative;
    flex-shrink: 0;
    height: 40px;
    padding: 0 25px;
    line-height: 40px;
    color: white;
    text-align: center;
    background-color: $--color-primary;

    &::before,
    &::after {
      position: absolute;
      top: 0;
      left: 0;
      display: inline-block;
      width: 0;
      height: 0;
      content: "";
    }

    &::before {
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-left: 20px solid white;
    }

    &::after {
      top: 50%;
      z-index: 1;
      border-top: 19px solid transparent;
      border-bottom: 19px solid transparent;
      border-left: 19px solid $--color-primary;
      transform: translateY(-50%);
    }

    &.is-first {
      &::before,
      &::after {
        display: none;
      }
    }
  }

  .stage-body {
    padding: 4px;
    overflow-y: auto;
    border-right: 1px solid $--border-color-base;
  }

  .more-desc {
    font-size: 13px;
    color: $--color-text-placeholder;
    text-align: center;
  }
}
</style>
